<template>
<div class="qa-container">
    <div class="qa-wrap">
       <h1>测试你的心理</h1>
       <div class="qa-content" v-if="!showResult">
         <div class="qa-info" v-if="!answerList">
           <h3>{{index}}、{{answerInfo.content}}</h3>
           <ul class="answer">
              <li class="question" 
                v-for="item in answerInfo.answer">
                 <label class="ui-radio">
                    <input type="radio" name="wishes" @change="selectAnswer($index)"/>
                    <div class="sign"></div>
                    {{item.desc}}
                </label>
              </li>
           </ul>
         </div>
         <ul class="qa-list">
            <li class="question-list" 
                v-for="item in answerList">
                  <h3>{{$index+1}}、{{item.question_content}}</h3>
                  <div>
                    {{item.answer}}、{{item.answer_content}}
                  </div>
              </li>
         </ul>
         <div class="next">
           <button @click="nextAnswer">下一题</button>
         </div>
       </div>
       <div class="result-content" v-show="showResult">
         <h3>{{result.conclusion_title}}</h3>
         <p>{{result.conclusion_content}}</p>
         <div class="next button-content">
            <button @click="resetAnser">再玩一次</button>
            <button  @click="openShare()">分享给好友</button>
         </div>
       </div>
    </div>
</div>
<div class="share-layer"
   v-if="showShareLayer"
   @click="showShareLayer = false">
   赶紧点击分享给你的好友吧
</div>

</template>

<script>
    import {
      QUESTION_GET,
      ANSWER_QUESTION,
      ANSWER_RESET
    } from '../api';
    export default {
        data(){
            return{
               showShareLayer:false,
               answerInfo:[],
               answerList:null,
               currentAnswer:'',
               answer:'',
               showResult:false,
               result:{},
               index:1
            }
        },
        methods:{
          getAnswer(){
              this.$http.get(QUESTION_GET)
              .then(res =>{
                  if(res.data.code ==0){
                    this.answerInfo = res.data.data;
                    // this.answerInfo.answer = [
                    //   {
                    //     desc:'问题1',
                    //     next:'1'
                    //   },
                    //   {
                    //     desc:'问题2',
                    //     next:'2'
                    //   }
                    // ]
                  }else if(res.data.code == 10){
                    //this.answerList = res.data.data
                    this.showResult = true;
                    this.result = res.data.data;
                  }else{
                    this.$toast.show(res.data.message);
                  }
              })
            },
            selectAnswer(index){
              const ANSWER_MAP = ['A','B','C','D','E','F','G'];
              this.answer = ANSWER_MAP[index];
            },
            nextAnswer(){
              if(!this.answer){
                return this.$toast.show('请选择答案');
              }
              this.$http.get(ANSWER_QUESTION,{
                question_id:this.answerInfo.id,
                answer:this.answer
              })
              .then(res =>{
                  if(res.data.code ==0){
                    this.answer = null;
                    this.answerInfo = res.data.data;
                    this.index ++ ;
                  }else if(res.data.code == 10){
                    this.showResult = true;
                    this.result = res.data.data
                  }else{
                    this.$toast.show(res.data.message);
                  }
              })
            },
            resetAnser(){
              this.$http.get(ANSWER_RESET)
              .then(res =>{
                  if(res.data.code ==0){
                    this.getAnswer();
                    this.showResult = false;
                    this.result = "";
                    this.index = 1;
                  }else{
                    this.$toast.show(res.data.message);
                  }
              })
            },
            openShare(){
              this.showShareLayer=true;
              jskit.openShare({
                title:'',
                desc:'',
                img:'',
                link:''
              })
            }
        },
        ready(){
            this.getAnswer();
        },
        components:{

        }
    }
</script>
<style lang="sass">
  @import "../sass/qa.scss"
</style>
